<script src="__PUBLIC__/js/artDialog/jquery.artDialog.js?skin=default"></script>
<script src="__PUBLIC__/js/artDialog/plugins/iframeTools.js"></script>
<style type="text/css">
a.a_upload,a.a_choose{
	border:1px solid #3d810c;
	box-shadow:0 1px #cccccc;
	-moz-box-shadow:0 1px #cccccc;
	-webkit-box-shadow:0 1px #cccccc;
	cursor:pointer; 
	display: inline-block;
	text-align: center;
	vertical-align:bottom;
	overflow:visible;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	vertical-align:middle;
	background-color: #f1f1f1;
	background-image: -webkit-linear-gradient(bottom, #ccc 0%, #e5e5e5 3%, #fff 97%, #fff 100%);
	background-image: -moz-linear-gradient(bottom, #ccc 0%, #e5e5e5 3%, #fff 97%, #fff 100%);
	background-image: -ms-linear-gradient(bottom, #ccc 0%, #e5e5e5 3%, #fff 97%, #fff 100%);
	color: #000;
	border:1px solid #aaa;
	padding:2px 8px 2px 8px;
	text-shadow: 0 1px #ffffff;
	font-size: 14px;
	line-height: 1.5;
}

.cmbitem {
	width: 100px;
	text-align: center;
}
.optsitem {
	float: right;
	margin-right: 50px;
}
.poptvalue {
	width:50px;
	text-align:center;
}

.pager{text-align:right;}
.pager a{padding:3px 8px;margin-left:3px;line-height:20px;background:#f9f9f9;border:1px solid #DBDBDB;text-decoration: none}
.pager a:hover,
.pager a.current{background-color:#7CD5B1;color:#fff;border:1px solid #7CD5B1;cursor:pointer;}
.page{text-align: center;margin:50px 0}
.page a,.page span.prev_disabled{border: 1px solid #ededed; color: #3d3d3d; font-weight: 700; height: 35px; line-height: 35px; margin-left:5px; min-width: 9px; padding: 0 13px; text-align: center; text-decoration: none; vertical-align: top; font-family: "simsun";display: inline-block}
.page span.prev_disabled{cursor: default;color:#ccc;margin:0 10px 0 0}
.page a.current{background-color: #f40; border-color: #f40; color: #fff; font-weight: 700; position: relative; z-index: 1;}
.page .extra{display: inline-block; margin-left: 10px; height: 35px; line-height: 35px; color: #656565;}
.page .page-num{border: 1px solid #ededed; height: 21px; text-align: center; width: 35px; display: inline-block}
.page .page-submit{background-clip: padding-box; border: 1px solid #ededed; border-radius: 2px; cursor: pointer; height: 21px; line-height: 21px; text-align: center; width: 43px; display: inline-block}
.page .page-submit:hover{border-color: #f40; color: #f40;}
.page a:focus, .page a:hover{border-color: #f40; z-index: 1;}

</style>
<div class="pd-20">
    <form action="" method="post" class="form form-horizontal" action="{:U("Admin/Order/addCollocation")}">
    	<input type="hidden" value="{$cid}" id="cid" name="cid">
    	<input type="hidden" value="{$foodsTotals}" id="ftotal" name="ftotal">
        <div class="row cl">
        	<label class="form-label col-3"><span class="c-red"></span></label>
            <div class="col-6" style="font-size:18px;font-weight:bold;">
	            	备选菜单
            </div>
            <div class="col-3"></div>
        </div>
        <div class="row cl">
        	<label class="form-label col-3"></label>
            <div class="col-6" style="font-size:18px;">
	            	<hr/>
            </div>
            <div class="col-3"></div>
        </div>
        <div class="row cl">
        	<label class="form-label col-3"><!--span class="c-red"></span>选择备选菜品--></label>
            <div class="col-6" id="foods">
            	<!--div class='loading_coll'><img src='__PUBLIC__/images/loading_coll.gif' alt='loading'></div-->
            </div>
            <div class="col-3"></div>
        </div>
        <div class="row cl">
        	<div class="col-3"></div>
        	<div class="col-6" id="foods-page">
        		<div class="pager" style="margin:30px 0 0 0">{$page}</div>
        	</div>
        </div>
        <div class="row cl">
            <div class="col-9 col-offset-3">
                <input name="fomr-add" class="btn btn-success " type="submit" value="&nbsp;提交&nbsp;">
            </div>
        </div>
    </form>
</div>
<script>
// 适配3.2
var site_url = '{:U("Admin/Upyun/upload", array(), false)}';
//用户-编辑
function manage_edit(title, url, id, w, h, pc) {
	var height = 440 + (h-1)*31;
	if(pc == null) {
		height -= 31;
	}
    layer_show(title, url, w, height);
}

// XXX 无用作废 XXX
function changeCbpName(obj) {
	var cbpid = $(obj).val();
	$('#cpname').val(cbpid);
	var sel = $('#collocations-sel');
	// 清楚sel中的选项
	sel.empty();
	
	$.ajax({
		url: '{:U("Admin/Order/getOneCollocations")}',
		type: 'POST',
		asyn:true,
		data:{
			combopackid:cbpid
		},
		timeout: 10000,
		dataType:'json',
		success:function(data, textStatus, jsqXHR) {
			var collocations = eval(data);
			for(var i=0;i<collocations.length;i++) {
				sel.append('<option value="'+collocations[i]+'">'+collocations[i]+'</option>');
			}
			$('#colname').val(collocations[0]);
			
		},
		error:function(data, textStatus) {
			alert("获取搭配组数据出错！");
		},
		
	});
}

function changeColName(obj) {
	var colname = $(obj).val();
	$('#colname').val(colname);
}
var curPage = 1;
$(document).ready(function(){
	/*
	$('.cbmitem-input').each(function(){
		console.log('cbmitem-input');
		
		$(this).change(function(){
			var foodCheckStatus = $(this).is(':checked');
			// 某个菜品选中
			if(foodCheckStatus == true) {
				$(this).parent().parent().children('.optsitem').find('input').removeAttr('disabled');
				$(this).parent().next().val(1);
			} else {
				$(this).parent().parent().children('.optsitem').find('input').attr('disabled', 'false');
				$(this).parent().next().val(0);
			}
		});
	});
	*/
	$(".pd-20").delegate(".pager a", "click", function() {
		var page = $(this).attr("data-page");
		// 如果点击page不等于当前page，需要进行整页切换
		if(page != curPage) {
			// 1.内容ul元素切换
			var colPageDom = $('#coll-'+page);
			if(colPageDom.length == 0) {
				getFoodsPage(page);
			} 
			$('#coll-'+curPage).css('display', 'none');
			$('#coll-'+page).css('display', 'block');
			curPage = page;
			
			// 不能单独对页码进行操作，因为首次不会输出“上一页”，因此直接从服务器端获取当前页码状态内容
			// 只要页码索引有变化就进行获取
			getFoodsPageHTML(page);
		}
    });
    // 绑定checkbox的change事件
    $("#foods").on("change", ".cbmitem-input", function() {
	    var foodCheckStatus = $(this).is(':checked');
		// 某个菜品选中
		if(foodCheckStatus == true) {
			$(this).parent().parent().children('.optsitem').find('input').removeAttr('disabled');
			$(this).parent().next().val(1);
		} else {
			$(this).parent().parent().children('.optsitem').find('input').attr('disabled', 'false');
			$(this).parent().next().val(0);
		}
    });
    // 初始化第一页
    getFoodsPage(1);
});

var getFoodsPageUrl = "{:U('Admin/Order/getOptionFoodsPage')}";
var getPageHTMLUrl = "{:U('Admin/Order/getOptionFoodsPageHTML')}";
var cid = $('#cid').val();
var ftotal = $('#ftotal').val();

// 方法有个缺陷，无法做到数据同步，如果操作过程中添加了数据
function getFoodsPage(page) {
    //$("#ajax_lists").html("<div class='loading'><img src='__PUBLIC__/images/loading.gif' alt='loading'></div>");
    $('.loading').css('display', 'block');
    $.get(getFoodsPageUrl, {page: page, cid:cid}, function(data) {
    	$('.loading_coll').css('display', 'none');
	    $('#foods').append(data);
	    /*
	    $(".cbmitem-input").bind("click", function() {
		    var foodCheckStatus = $(this).is(':checked');
	
			// 某个菜品选中
			if(foodCheckStatus == true) {
				$(this).parent().parent().children('.optsitem').find('input').removeAttr('disabled');
				$(this).parent().next().val(1);
			} else {
				$(this).parent().parent().children('.optsitem').find('input').attr('disabled', 'false');
				$(this).parent().next().val(0);
			}
	    });
		*/
    });
}
// 获取到页码内容HTML
function getFoodsPageHTML(page) {
	$.get(getPageHTMLUrl, {page: page, count: ftotal}, function(data){
		$('.pager').html(data);
	});
}
</script>